<template>
  <view class="detail">
    <view class="detail-section flex-align l-100">
      <text class="title">{{this.name}}</text>
    </view>
    <view class="detail-section">
      <view class="header flex-align l-100">
        <text class="title">科室介绍</text>
      </view>
      <view class="content">
        <text>神经外科是外科学中的一个分支，是在外科学以手术为主要治疗手段的基础上，应用独特的神经外科学研究方法，研究人体神经系统，如....</text>
      </view>
    </view>
    <view class="detail-section">
      <view class="header flex-align l-100">
        <text class="title">推荐专家</text>
      </view>
      <view class="content doctor">
        <pane-card title="医生1">
          <view class="doctor-avator" slot="icon">
            <image src="./avator.svg"></image>
          </view>
          <view class="doctor-detail" slot="subtitle">
            <text class="block">{{this.name}} | 主治医师</text>
            <text class="block">擅长领域：对各种妇科疾病</text>
          </view>
        </pane-card>
        <pane-card class="no-border" title="医生1">
          <view class="doctor-avator" slot="icon">
            <image src="./avator.svg"></image>
          </view>
          <view class="doctor-detail" slot="subtitle">
            <text class="block">{{this.name}} | 主治医师</text>
            <text class="block">擅长领域：对各种妇科疾病</text>
          </view>
        </pane-card>
        <view class="doctor-more">
          <text @tap="goto">查看更多</text>
        </view>
      </view>
    </view>
    <view class="detail-section">
      <view class="header flex-align l-100">
        <text class="title">科室位置</text>
      </view>
      <view class="content">
        <text>主楼二层11诊区</text>
      </view>
    </view>
  </view>
</template>
<script>
  import PaneCard from '@/components/m-card/pane-card.vue'
  export default {
    components: {
      PaneCard
    },
    data() {
      return {
        name: '',
      }
    },
    onLoad({ name }) {
      this.name = name
      console.log('name', this.name);
      uni.setNavigationBarTitle({
        title: this.name
      });
    },
    methods: {
      goto() {
        console.log('goto');
        uni.navigateTo({
          url: `/pages/office/doctor?name=${this.name}`
        })
      }
    }
  }
</script>
<style lang="scss">
  .detail {
    width: 100%;
    padding: 30rpx 4rpx 0;
    background-color: rgba($color: $uni-color-primary, $alpha: 0.1);

    .l-100 {
      min-height: 100rpx;
    }

    .flex-align {
      display: flex;
      align-items: center;
    }

    &-section {
      margin-bottom: 30rpx;
      padding: 0 40rpx;

      background-color: #fff;

      .title {
        font-size: 32rpx;
      }
    }

    .doctor {
      image {
        width: 160rpx;
        height: 160rpx;
      }

      &-more {
        margin-top: 20rpx;
        text-align: center;
        color: $uni-color-primary;
      }
    }

    .header {
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
    }

    .content {
      padding: 20rpx 0 40rpx;
    }

    .no-border {
      border: 0 !important;
    }

    pane-card,
    .pane-card {
      margin: 0;
      width: 100%;
      padding: 0;
      box-shadow: none;
      border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
    }
  }
</style>